<template>
    <div class="search-wrap">
        <tt-autocomplete
                v-model="searchWord"
                :fetch-suggestions="querySearchAsync"
                :on-icon-click="handleIconClick"
                :on-enter-keydown="handleEnterKeydown"
                :custom-item="resultType"
                :placeholder="placeHolder"
                @select="handleSelect"
                icon="search"
                icon-size="18"
        ></tt-autocomplete>
    </div>
</template>
<style lang="less" rel="stylesheet/less"></style>
<script>
  import reqwest from 'reqwest';
  import Vue from 'vue';

  Vue.component('sortable-list', {
    functional: true,
    render: function (h, ctx) {
      var item = ctx.props.item;
      var index = ctx.props.index + 1;
      return h('li', ctx.data, [
        h('i', { attrs: { class: 'search-no search-no-' + index } }, [index]),
        h('span', { attrs: { class: 'search-text' } }, [item.value])
      ]);
    },
    props: {
      item: { type: Object, required: true },
      index: Number
    }
  });

  export default {
    name: 'SearchBox',
    props: {
      searchUrl: {
        type: String,
        default: '//www.toutiao.com/search/?keyword='
      },
      getSearchSuggestionUrl: {
        type: String,
        default: '/search/sug/'
      },
      getHotSearchUrl: {
        type: String,
        default: '/c/hot_words/'
      }
    },
    data() {
      return {
        wordslist: [],
        searchWord: '',
        timeout:  null,
        placeHolder: '请输入要搜索的内容',
        resultType: 'sortable-list'
      };
    },
    methods: {
      querySearchAsync(queryString, cb) {

        var results = [];

        if (queryString) {
          this.resultType = ''

          reqwest({
            url: this.getSearchSuggestionUrl,
            data: {
              keyword: queryString
            },
            method: 'GET',
            success: (response) => {
              var rs = response && response.data ? response.data : [];

              rs.forEach(function(item) {
                results.push({
                  value: item
                });
              });

              cb(results);
            }
          });
        } else {
          this.resultType = 'sortable-list'
          results = this.wordslist;
          cb(results);
        }
      },
      toSearchPage(word) {
        if (word) {
          window.open(this.searchUrl + word);
        }
      },
      handleIconClick() {
        this.toSearchPage(this.searchWord);
      },
      handleSelect(item) {
        this.toSearchPage(item.value);
      },
      handleEnterKeydown() {
        this.toSearchPage(this.searchWord);
      }
    },
    mounted() {
      reqwest({
        url: this.getHotSearchUrl,
        method: 'GET',
        success: (res) => {
          if (res.message === 'success') {
            if (!Array.isArray(res.data) || res.data.length === 0) return;

            let data = [];

            res.data.forEach(function(item) {
              data.push({
                value: item
              });
            });

            this.wordslist = data;
            this.placeHolder = '大家都在搜：' + data[0].value;
          }
        }
      });
    }
  };
</script>



// WEBPACK FOOTER //
// searchbox.vue?9552ce44